<template>
    <div>
        <el-button size="small" type="primary" round @click="handleOpenAddDialog()">添加标签</el-button>
        <el-table :data="tagList" style="width: 100%">
            <el-table-column prop="title" label="标签名" width="180" />
            <el-table-column prop="grade" label="阶段" width="180" :sortable="true" :sort-method="dataSort">
                <template #default="scope">
                    <el-tag :type="types[scope.row.grade - 1]" disable-transitions>{{ names[scope.row.grade - 1]
                    }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button @click="handleOpenEditDialog(scope.row)" size="small" type="primary" round>编辑</el-button>
                    <el-popconfirm title="确定要删除吗？" confirm-button-text="确定" cancel-button-text="取消"
                        @confirm="handleDelete(scope.row)">
                        <template #reference>
                            <el-button size="small" type="danger" round>删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="dialogVisible" :title="title" width="30%">
            <el-form :model="tagForm" label-width="100px" :label-position="'right'" ref="tagFormRef">
                <el-form-item label="标签名" prop="title">
                    <el-input v-model="tagForm.title" autocomplete="off" />
                </el-form-item>
                <el-form-item label="阶段" prop="grade">
                    <el-select v-model="tagForm.grade" placeholder="请选择阶段">
                        <el-option v-for="(item, index) in names" :key="index" :label="item" :value="index + 1" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleAddOrUpdate">保存</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import axios from 'axios'
import { onMounted, reactive, ref, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
const types = ['success', 'warning', 'danger']
const names = ['第一阶段', '第二阶段', '第三阶段']
const tagList = ref([])    // 标签列表
const title = ref('')
const tagFormRef = ref(null)

onMounted(() => {
    // 调用接口获取标签列表数据
    getList()
})

const getList = async () => {
    var res = await axios.get('/adminapi/tags')
    tagList.value = res.data
}

// 排序
const dataSort = (rowA, rowB) => {
    return rowA.grade - rowB.grade
}

// 控制对话框显示隐藏
const dialogVisible = ref(false)
const tagForm = reactive({
    grade: '',
    title: ''
})

// 保存当前更新的item项的_id
let curItemId

const handleAddOrUpdate = () => {
    if (title.value === '添加标签') {
        handleAdd()
    } else {
        handleUpdate()
    }
}

const handleOpenAddDialog = () => {
    title.value = '添加标签'
    dialogVisible.value = true
    nextTick(() => {
        tagFormRef.value.resetFields()
    })
}

const handleAdd = async () => {
    dialogVisible.value = false
    addTag()
}

const addTag = async () => {
    var res = await axios.post('/adminapi/tags', tagForm)

    if (res.statusText === 'OK') {
        ElMessage({
            message: '添加成功',
            type: 'success'
        })
        await getList()
    } else {
        ElMessage({
            message: '添加失败',
            type: 'error'
        })
    }
}

const handleOpenEditDialog = (row) => {
    title.value = '编辑标签'
    dialogVisible.value = true
    nextTick(() => {
        tagForm.grade = row.grade
        tagForm.title = row.title
        curItemId = row._id
    })
}

const handleUpdate = () => {
    dialogVisible.value = false
    updateTag()
}

const updateTag = async () => {
    var res = await axios.put(`/adminapi/Tags/${curItemId}`, {
        title: tagForm.title,
        grade: tagForm.grade
    })
    if (res.statusText === 'OK') {
        ElMessage({
            message: '更新成功',
            type: 'success'
        })
        await getList()
        // 如果需要保证管理员更新权限名称后后，就能立即看到左侧菜单栏的变更，可以通过刷新界面这种简单的方式实现
        // location.reload()
    } else {
        ElMessage({
            message: '更新失败',
            type: 'error'
        })
    }
}

const handleDelete = async (row) => {
    axios.delete('/adminapi/tags', {
        data: {
            id: row._id
        }
    })
    // location.reload()
    await getList()
}
</script>